<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<h2 mat-dialog-title>Search Events</h2>
<form class="search-events-form" [formGroup]="provenanceOptionsForm">
    <mat-dialog-content>
        @for (searchableField of request.options.searchableFields; track searchableField) {
            <div [formGroupName]="searchableField.id">
                <mat-form-field>
                    <mat-label>{{ searchableField.label }}</mat-label>
                    <input matInput formControlName="value" type="text" />
                </mat-form-field>
                <div class="-mt-4 mb-4">
                    <mat-checkbox formControlName="inverse" name="inverse"> Exclude</mat-checkbox>
                </div>
            </div>
        }
        @if (request.options.searchableFields.length === 0) {
            <div class="unset neutral-color mb-5">
                No searchable fields are available. Search criteria based on date, time, and file size still available.
            </div>
        }
        <mat-form-field>
            <mat-label>Date Range</mat-label>
            <mat-date-range-input [rangePicker]="picker">
                <input
                    matStartDate
                    formControlName="startDate"
                    placeholder="Start date"
                    title="The start date in the format 'mm/dd/yyyy'. Must also specify start time." />
                <input
                    matEndDate
                    formControlName="endDate"
                    placeholder="End date"
                    title="The end date in the format 'mm/dd/yyyy'. Must also specify end time." />
            </mat-date-range-input>
            <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-date-range-picker #picker></mat-date-range-picker>
        </mat-form-field>
        <div class="flex gap-x-3">
            <div class="w-full flex flex-col">
                <mat-form-field>
                    <mat-label>Start Time ({{ timezone }})</mat-label>
                    <input
                        matInput
                        type="time"
                        step="1"
                        formControlName="startTime"
                        placeholder="hh:mm:ss"
                        title="The start time in the format 'hh:mm:ss'. Must also specify start date." />
                </mat-form-field>
                <mat-form-field>
                    <mat-label>
                        Minimum File Size
                        <i
                            class="fa fa-info-circle"
                            nifiTooltip
                            [tooltipComponentType]="TextTip"
                            tooltipInputData="The minimum file size (e.g. 2 KB)."></i>
                    </mat-label>
                    <input matInput type="text" formControlName="minFileSize" />
                </mat-form-field>
            </div>
            <div class="w-full flex flex-col">
                <mat-form-field>
                    <mat-label>End Time ({{ timezone }})</mat-label>
                    <input
                        matInput
                        type="time"
                        step="1"
                        formControlName="endTime"
                        placeholder="hh:mm:ss"
                        title="The end time in the format 'hh:mm:ss'. Must also specify end date." />
                </mat-form-field>
                <mat-form-field>
                    <mat-label>
                        Maximum File Size
                        <i
                            class="fa fa-info-circle"
                            nifiTooltip
                            [tooltipComponentType]="TextTip"
                            tooltipInputData="The maximum file size (e.g. 4 GB)."></i>
                    </mat-label>
                    <input matInput type="text" formControlName="maxFileSize" />
                </mat-form-field>
            </div>
        </div>
        @if (searchLocationOptions.length > 0) {
            <mat-form-field>
                <mat-label>Search Location</mat-label>
                <mat-select formControlName="searchLocation">
                    @for (option of searchLocationOptions; track option) {
                        <mat-option [value]="option.value">{{ option.text }}</mat-option>
                    }
                </mat-select>
            </mat-form-field>
        }
    </mat-dialog-content>
    <mat-dialog-actions align="end">
        <button mat-button mat-dialog-close>Cancel</button>
        <button
            [disabled]="provenanceOptionsForm.invalid || provenanceOptionsForm.pending"
            type="button"
            (click)="searchClicked()"
            mat-flat-button
            mat-dialog-close>
            <span>Search</span>
        </button>
    </mat-dialog-actions>
</form>
